<template>
            <div class="projects-grid">
            <a href="http://web4web.top:8070/" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                
                <div class="work-doc">
                        <p class="project-title">在线图片合成-GO开发，Docker部署</p>
                </div>

            </a>
            <a href="https://github.com/aturX/100DD100/tree/master/day049" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">GUI开发：五子棋（Java、Python）</p>
                </div>
            </a>
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">致敬页面</p>
                </div>         
            </a>
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">致敬页面</p>
                </div>         
            </a>
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">致敬页面</p>
                </div>          
            </a>
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
                <img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project">
                <div class="work-doc">
                        <p class="project-title">致敬页面</p>
                </div>         
            </a>
        </div>
</template>

<style scoped>
/* 第二部分： 作品界面 */


 
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 3rem;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    margin-bottom: 2rem;
}


.project {
    background: #303846;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
}
 
.project-title {
    font-size: 1rem;
    padding: 0.5rem 0.5rem;
}

:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

.project-image {
    display: block;
    /* height: calc(100% - 6rem); */
    width: 100%;
    object-fit: cover;
}


.work-doc:hover {
    /* 鼠标悬浮变色效果 */
    background-color: #303F9F;
    color: yellow; 
}

</style>